import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import List from '@mui/material/List';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItem from '@mui/material/ListItem';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import SchoolIcon from '@mui/icons-material/School';

import './index.scss'
import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
import { getRoomsAPI } from '../../apis/rooms'
import { useState } from 'react';
import { setRoomId, setRoomLocation, setRoomNumber } from '../../utils/localStorage/room';

const ClassRooms = () => {

    const navigate = useNavigate()

    // 选择教室
    const selectRoom = (id,location,number) => {
        console.log(id)
        setRoomId(id)
        setRoomLocation(location)
        setRoomNumber(number)
        navigate('/seats')
    }

    // 教室列表
    const [roomList, setRoomList] = useState([])

    // 获取教室列表
    useEffect(() => {
        getRoomsAPI().then(res => {
            console.log('获取教室列表', res)
            setRoomList(res.data)
        })
    }, [])

    return (
        <>
            <div className='classRoomsPage'>
                <Paper elevation={3} style={{
                    width: '100vw',
                    margin: '20px',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <Typography align='center' variant="h5" gutterBottom>
                        选择自习室
                    </Typography>
                    <List style={{
                        width: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        {roomList.map((item, index) => <ListItem key={item.id} disablePadding onClick={() => selectRoom(item.id,item.location,item.number)}>
                            <ListItemButton>
                                <ListItemIcon>
                                    <SchoolIcon />
                                </ListItemIcon>
                                <ListItemText primary={item.location + item.number} />
                                <ListItemText primary={'剩余座位数：' + item.shengYuSum} />
                            </ListItemButton>
                        </ListItem>
                        )}
                    </List>
                </Paper>

            </div>
        </>
    )
}

export default ClassRooms